@use "./variables.scss";
@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}
// 暂无数据基础样式.
@mixin noDataBase {
  width: 166px;
  height: 134px;
  background-image: url('@/assets/images/no-data.png');
  background-size: 100%;
}

// 文本溢出显示省略号
@mixin overHide($rows: 2) {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $rows; /* 这里是超出几行省略 */
  overflow: hidden;
}
// 生成系统表单的宽度样式，如170，240，360等
@mixin formInputWidth($w) {
  .el-input,
  .el-select,
  .el-textarea,
  .el-date-editor,
  .el-input-number {
    @if $w == 'fullWidth' {
      width: 100%;
    } @else if $w == 'mini' {
      width: 60px;
    } @else {
      width: #{$w}px;
    }
  }
  .el-select > .el-input {
    width: 100%;
  }
  // 任意固定宽度的设置，如果不能撑出父元素的高度，可以添加最大100%的限制
  .el-input.max-width-parent,
  .el-select.max-width-parent,
  .el-textarea.max-width-parent {
    max-width: 100%;
  }
}

// 弹窗/抽屉
@mixin header {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px !important;
  // padding: 16px 20px;
  background-color: variables.$menuBg;
  border-radius: 4px;
  text-align: left;
  font-family: MicrosoftYaHei;
  border-bottom: 1px #ebeef5 solid;
}
@mixin title {
  font-size: 16px;
  color: variables.$menuText;
}
@mixin closeBtn {
  top: unset !important;
  background: url('@/assets/images/close_black.png') left no-repeat;
  background-size: 16px;
}
@mixin footerBtn {
  width: 78px;
  height: 30px;
  line-height: 30px;
  padding: 0;
}

// $style-list: border-color, border-width, border-style, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-radius, width, height, color,
//     line-height, font-size, font-weight, letter-spacing, text-align, text-decoration-line, background, background-color, opacity, background-image, background-repeat, background-size,
//     background-position-x, background-position-y, box-shadow, margin-top, margin-bottom, margin-left, margin-right, padding-top, padding-bottom, padding-left, padding-right;

// 长宽
$width-height-style: width, height;
// 最大长宽
$max-width-height-style: max-width, max-height;
// 最小长宽
$min-width-height-style: min-width, min-height;
// 边距
$margin-padding-style: margin-top, margin-bottom, margin-left, margin-right, padding-top,
  padding-bottom, padding-left, padding-right;
// 字体
$font-style: color, line-height, font-size, font-weight, letter-spacing, text-align,
  text-decoration-line;
// 背景
$background-style: background, background-color, opacity, background-image, background-repeat,
  background-size, background-position-x, background-position-y;
// 边框
$border-style: border-color, border-width, border-style, border-top-left-radius,
  border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-radius;
// 阴影
$box-shadow-style: box-shadow;

// 根据属性列表生成样式
@mixin createCssByAttributes($selector, $attrs...) {
  @each $attr in $attrs {
    &[style*='--#{$attr}'] {
      #{$selector} {
        #{$attr}: var(--#{$attr});
      }
    }
  }
}
// 根据属性列表生成带important的样式
@mixin createCssByAttributesImportant($selector, $attrs...) {
  @each $attr in $attrs {
    &[style*='--#{$attr}'] {
      #{$selector} {
        #{$attr}: var(--#{$attr}) !important;
      }
    }
  }
}
/**
 * 属性名和属性值不同时，可以用sass里的maps数据类型定义数据
 * $attrMaps: (color: option-color);
 */
@mixin createCssByAttributeMaps($selector, $attrMaps) {
  @each $attr, $value in $attrMaps {
    &[style*='--#{$value}'] {
      #{$selector} {
        #{$attr}: var(--#{$value});
      }
    }
  }
}

@mixin createCssByAttributesGroup($selector, $attrs-group...) {
  @each $attrs in $attrs-group {
    @include createCssByAttributes($selector, $attrs...);
  }
}
@mixin createCssByAttributesGroupImportant($selector, $attrs-group...) {
  @each $attrs in $attrs-group {
    @include createCssByAttributesImportant($selector, $attrs...);
  }
}
// 所有样式，包括长宽，边距，字体，背景，边框，阴影
@mixin createCssFromStyles($selector) {
  $style-list: $width-height-style, $max-width-height-style, $margin-padding-style, $font-style,
    $background-style, $border-style, $box-shadow-style;
  @include createCssByAttributesGroup($selector, $style-list...);
}
// 最外层的基础样式, 包括边距，背景，边框，阴影
@mixin createCssFromOutsideBasicStyles($selector) {
  $style-list: $margin-padding-style, $background-style, $border-style, $box-shadow-style,
    $min-width-height-style;
  @include createCssByAttributesGroup($selector, $style-list...);
}
// 字体相关样式
@mixin createCssFromFontStyle($selector) {
  @include createCssByAttributesGroup($selector, $font-style);
}
// 长宽样式
@mixin createCssFromWidthHeightStyle($selector) {
  @include createCssByAttributesGroup($selector, $width-height-style);
}
// 背景色和边距样式
@mixin createCssFromBackgroundMarginPaddingStyle($selector) {
  @include createCssByAttributesGroup($selector, $background-style, $margin-padding-style);
}

@mixin createCssFromCardLabelStyles($selector) {
  $style-list: border-top-left-radius, border-top-right-radius, border-bottom-right-radius,
    border-bottom-left-radius, border-radius;
  @each $attr in $style-list {
    &[style*='--#{$attr}'] {
      #{$selector} {
        #{$attr}: var(--#{$attr});
      }
    }
  }
}

@mixin createCssFromTabsItemsStyles($selector) {
  $style-list: color, line-height, font-size, font-weight, letter-spacing, text-align,
    text-decoration-line;
  @each $attr in $style-list {
    &[style*='--#{$attr}'] {
      #{$selector} {
        #{$attr}: var(--#{$attr}) !important;
      }
    }
  }
}

@mixin createCssDividerStyles($selector) {
  $style-list: border-color, border-width, border-style, border-top-left-radius,
    border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-radius,
    width, color, font-size, font-weight, text-align;
  @each $attr in $style-list {
    &[style*='--#{$attr}'] {
      #{$selector} {
        #{$attr}: var(--#{$attr});
      }
    }
  }
}

@mixin createCssDividerPaddingInlineAndMarginStyles($selector) {
  $style-list: padding-inline, margin-left, margin-right;
  @each $attr in $style-list {
    &[style*='--#{$attr}'] {
      #{$selector} {
        #{$attr}: var(--#{$attr});
      }
    }
  }
}
